<template>
	<view class="homepage-box">
		<view class="homepage-top padding30">
			<u-row gutter="16">
				<u-col span="10">
					<view class="homepage-top-logo">
						<image class="homepage-top-img" src="http://1812.img.pp.sohu.com.cn/images/blog/2009/11/18/18/8/125b6560a6ag214.jpg"/>
						<view class="homepage-top-text">shichang</view>
					</view>
				</u-col>
				<u-col span="2">
					<view class="homepage-top-tb" @click="Workorderlist">
						<u-icon name="photo" color="#fff" size="50"></u-icon>
					</view>
				</u-col>
			</u-row>
		</view>
		<view class="homepage-auto">
			<view class="homepage-auto-top1">
				<view class="homepage-auto-returnServant">上月返佣金额</view>
				<view class="homepage-auto-number">3680.00</view>
				<u-line class="u-line"></u-line>
				<u-row gutter="16" class="homepage-auto-box">
					<u-col span="3">
						<view class="homepage-auto-text">
							<view class="homepage-auto-text1">8</view>
							<view class="homepage-auto-text2">今日线索</view>
						</view>
					</u-col>
					<u-col span="6">
						<view class="homepage-auto-text">
							<view class="homepage-auto-text1">34</view>
							<view class="homepage-auto-text2">当月线索</view>
						</view>
					</u-col>
					<u-col span="3">
						<view class="homepage-auto-text">
							<view class="homepage-auto-text1">136</view>
							<view class="homepage-auto-text2">线索总量</view>
						</view>
					</u-col>
				</u-row>
			</view>
			<view class="homepage-auto-top2">
				<u-row gutter="16" class="homepage-auto-top2-box">
					<u-col span="3.5">
						<view class="homepage-auto-top2-Ranking">评分排行榜</view>
					</u-col>
					<u-col span="4.5">
						<view class="homepage-auto-top2-topfew">前8名</view>
					</u-col>
					<u-col span="4">
						<view class="homepage-auto-top2-tb" @click="score"><u-icon name="photo" color="#FFFFFF" size="40"></u-icon></view>
					</u-col>
				</u-row>
				<u-line class="u-line"></u-line>
				<view style="height: 150px;margin: 20upx 0;">
					
				</view>
			</view>
			<view class="homepage-auto-top3">
				<u-row gutter="16" class="homepage-auto-top3-box">
					<u-col span="8">
						<view class="homepage-auto-top3-Ranking">机构排行榜</view>
					</u-col>
					<u-col span="4">
						<view class="homepage-auto-top3-tb" @click="mechanism"><u-icon name="photo" color="#999999" size="40"></u-icon></view>
					</u-col>
				</u-row>
				<u-line class="u-line"></u-line>
				<u-row gutter="16" class="homepage-auto-top3-box1">
					<u-col span="3">
						<view class="homepage-auto-top3-text">
							<view class="homepage-auto-top3-text1">
								1
							</view>
							<view class="homepage-auto-top3-text2">
								排名
							</view>
						</view>
					</u-col>
					<u-col span="6">
						<view class="homepage-auto-top3-topfew1">
							<view class="homepage-auto-top3-topfew1-text1">
								<image class="homepage-auto-top3-topfew1-text1-img" src="http://1812.img.pp.sohu.com.cn/images/blog/2009/11/18/18/8/125b6560a6ag214.jpg"/>
							</view>
							<view class="homepage-auto-top3-topfew1-text2">
								优胜教育培训
							</view>
						</view>
					</u-col>
					<u-col span="3">
						<view class="homepage-auto-top3-text">
							<view class="homepage-auto-top3-text1">
								8.0
							</view>
							<view class="homepage-auto-top3-text2">
								评分
							</view>
						</view>
					</u-col>
				</u-row>
				<view style="height: 150px;margin: 20upx 0;">
					
				</view>
				<view class="homepage-auto-top4-box">
					该柱状图仅展示上月前8名
				</view>
			</view>
		</view>
		<view class="homepage-bottom">
			<bottom/>
		</view>
	</view>
</template>

<script>
	import bottom from '../../../components/bottom-other/index.vue'
	export default {
		components:{ bottom },
		data() {
			return {
				
			}
		},
		onLoad() {

		},
		methods: {
			score (){
				uni.navigateTo({
					url: '/pages/market/homepage/Rankinglist'
				})
			},
			mechanism (){
				uni.navigateTo({
					url: '/pages/market/homepage/mechanismRankingList'
				})
			},
			Workorderlist (){
				uni.switchTab({
					url: '/pages/market/Workordermanagement/index'
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.homepage-box{
		
	}
	.padding30{
		padding: 30upx;
	}
	.homepage-top{
		padding: 50upx 30upx;
		height: 226upx;
		background-color: #92C15E;
	}
	.homepage-top-logo{
		display: flex;
		align-items: center;
	}
	.homepage-top-img{
		width: 70upx;
		height: 70upx;
		border-radius: 100px;
	}
	.homepage-top-text{
		color: #fff;
		font-size: 28upx;
		font-weight: 500;
		margin-left: 20upx;
	}
	.homepage-top-tb{
		text-align: right;
	}
	.homepage-auto{}
	.homepage-auto-top1{
		margin: 30upx;
		padding: 30upx;
		margin-top: -65upx;
		border-radius: 10upx;
		background-color: #fff;
		box-shadow: 0px 5px 20px 0px rgba(153, 153, 153, 0.7);
	}
	.homepage-auto-top2{
		margin: 30upx;
		padding: 30upx;
		border-radius: 10upx;
		background-color: #92C15E;
	}
	.homepage-auto-top2-box{
		margin-bottom: 30upx;
	}
	.homepage-auto-top2-Ranking{
		color: #FFFFFF;
		font-size: 30upx;
		font-weight: bolder;
		letter-spacing: 2px;
	}
	.homepage-auto-top2-topfew{
		color: #FFFFFF;
		font-size: 22upx;
		font-weight: 400;
		letter-spacing: 2px;
	}
	.homepage-auto-top2-tb{
		text-align: right;
	}
	.homepage-auto-top3{
		margin: 30upx;
		margin-bottom: 100upx;
		padding: 30upx;
		border-radius: 10upx;
		background-color: #fff;
		box-shadow: 0px 0px 15px 0px rgba(153, 153, 153, 0.7);
	}
	.homepage-auto-top3-box{
		margin-bottom: 30upx;
	}
	.homepage-auto-top3-Ranking{
		color: #333333;
		font-size: 30upx;
		font-weight: bolder;
		letter-spacing: 2px;
	}
	.homepage-auto-top3-tb{
		text-align: right;
	}
	.homepage-auto-top3-box1{
		margin-top: 20upx;
	}
	.homepage-auto-top3-text{
		text-align: center;
	}
	.homepage-auto-top3-text1{
		color: #92C15E;
		font-weight: bold;
		font-size: 48upx;
	}
	.homepage-auto-top3-text2{
		color: #999999;
		font-size: 24upx;
		margin-top: 10upx;
		font-weight: bold;
	}
	.homepage-auto-top3-topfew1{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-flow: row wrap;
	}
	.homepage-auto-top3-topfew1-text1{
		width: 70upx;
		height: 70upx;
		overflow: hidden;
		border-radius: 100px;
		border: 2px solid #92C15E;
	}
	.homepage-auto-top3-topfew1-text1-img{
		width: 100%;
		height: 100%;
	}
	.homepage-auto-top3-topfew1-text2{
		width: 100%;
		color: #333333;
		font-size: 24upx;
		font-weight: bold;
		margin-top: 4upx;
		text-align: center;
	}
	.homepage-auto-top4-box{
		color: #F08200;
		font-size: 25upx;
		padding-left: 10px;
		position: relative;
	}
	.homepage-auto-top4-box:after{
		left: 0;
		top: 6px;
		content: "";
		width: 10upx;
		height: 10upx;
		position: absolute;
		border-radius: 50%;
		background-color: #F08200;
	}
	.homepage-auto-returnServant{
		color: #999999;
		font-size: 25upx;
		font-weight: bold;
		text-align: center;
		letter-spacing: 3px;
	}
	.homepage-auto-box{
		margin-top: 30upx;
		margin-bottom: 20upx;
	}
	.homepage-auto-number{
		color: #92C15E;
		font-size: 80upx;
		font-weight: bold;
		text-align: center;
		margin: 48upx 0;
	}
	.homepage-auto-text{
		text-align: center;
	}
	.homepage-auto-text1{
		color: #333333;
		font-size: 50upx;
		font-weight: bold;
	}
	.homepage-auto-text2{
		font-size: 25upx;
		color: #999999;
		margin-top: 10upx;
		font-weight: bold;
	}
	.homepage-bottom{}
</style>